<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="demo" data-msg="hello">123123</div>
</body>
<script>
    var demo = document.getElementById("demo")

    // var arr = [1, 2, 3, 4, 5, 6];
    // var obj = { a: 1, b: 2, c: 3 };

    // 数组和对象直接转为字符串 会破坏数据的原本结构
    // console.log(String(arr));  // '1,2,3,4,5,6'
    // console.log(String(obj));  // '[object Object]'

    // 有没有什么方法,在保留数组和对象结构的情况下将其转化为字符串  => JSON字符串(有数组和对象结构的字符串)
    // var arr = [1, 2, 3,[ 4, 5, 6]];        // 转化后的期望结果: '[1, 2, 3, [4, 5, 6]]'
    // var obj = { "a": 1, "b": 2, "c": 3 };  // 转化后的期望结果: '{ "a": 1, "b": 2, "c": 3 }'


    // console.log(Math); // Math对象 => 存储数学相关的属性和方法

    // JSON对象 =>  存储数组/对象和JSON字符串相互转化的方法
    // JSON.stringify()  将数组和对象转化为JSON字符串(有数组和对象结构的字符串)
    // JSON.parse()      可以将JSON字符串解析为数组和对象(新的)

    console.log(JSON); // JSON对象 => 存储数组/对象和JSON字符串相互转化的方法

    var arr = [1, 2, 3,[ 4, 5, 6]];       
    var obj = { "a": 1, "b": 2, "c": 3, d:arr }; 

    // 组合版 数组对象
    var comb = [{name:"张三",age:18},{name:"李四",age:22}]

    // console.log(arr);

    // JSON.stringify() 数组和对象转化为JSON字符串  
    // 应用:
    // 1. 元素的属性节点的属性值都是字符串类型 => 如果向存储一些复杂的数据(数组和对象),默认隐式转字符串
    // 解决方法: 
    //    a. 可以在存储之前先转化为JSON字符串,再存储
    //    b. 在取值时 先取值(json字符串) 在解析为数组和对象

    // 2. 网站/手机app可以在用户本地存储一些数据 (cookie localstorage)   => 只能存字符串类型 => 如果向存储一些复杂的数据(数组和对象),默认隐式转字符串  =>解决方法同上

    demo.setAttribute("data-list",JSON.stringify(arr));
    demo.setAttribute("data-obj",JSON.stringify(obj));
    demo.setAttribute("data-users",JSON.stringify(comb));

   


    // JSON.parse()   可以将JSON字符串解析为数组和对象  (eval的封装版)
    // 应用: 
    //    前后端交互时,后端给前端返回复杂数据时一般会返回json字符串  => 需要先解析成数组/对象才能使用


    // eval 解析对象时可能会认为是 块级作用域 => 所以要在字符串前后加 ()
    // var arr1 = eval('([1,2,3,[4,5,6]])')
    // console.log(arr1);
    // var obj1 = eval('({"a":1,"b":2,"c":3,"d":[1,2,3,[4,5,6]]})')
    // console.log(obj1);

    var arr1 = JSON.parse('[1,2,3,[4,5,6]]')
    console.log(arr1);
    var obj1 = JSON.parse('{"a":1,"b":2,"c":3,"d":[1,2,3,[4,5,6]]}')
    console.log(obj1);
    var com1 = JSON.parse('[{"name":"张三","age":18},{"name":"李四","age":22}]')
    console.log(com1);

    console.log(arr === arr1);



    



</script>

</html>